<template>
  <view class="su-list-picker">
    <!-- handler -->
    <view class="su-list-picker__handler" @click="showPopup=true">
      <slot :data="activeRow"></slot>
    </view>
    <!-- popup -->
    <u-popup ref="pickerPopup" closeOnClickOverlay :show="showPopup" @close="showPopup=false" :round="10" mode="bottom">
      <view class="white-bg p10">
        <u-search v-model="queryParams.keyword" placeholder="输入关键词搜索" :showAction="false" @search="reloadList">
        </u-search>
      </view>
      <scroll-view scroll-y class="su-list-popup_container" @scrolltolower="getListPage">
        <view class="su-list-popup_list">
          <view class="su-list-popup_list_item" :class="{active:item[defaultProps.value]===value}"
            v-for="(item, index) in list" :key="index" @click="itemClick(item)">
            <view class="su-list-popup_list_main">
              {{item[defaultProps.label]}}
            </view>
            <view class="su-list-popup_list_right">
              <text v-show="item[defaultProps.value]!==value" class="iconfont icon-radio-notcheck"></text>
              <text v-show="item[defaultProps.value]===value" class="iconfont icon-radio-checked"></text>
            </view>
          </view>
        </view>
        <!-- loading -->
        <su-list-loading :loading="listLoading" :listLength="list.length"></su-list-loading>
        <!-- 无数据 -->
        <su-empty v-if="listLoaded && listTotal==0" class="mt40"></su-empty>
        <!-- 到底了 -->
        <view class="f12 align-center p40" v-if="listLoaded && list.length">
          到底了
        </view>
      </scroll-view>
      <!-- <view class="su-list-popup_footer" @click="showPopup=false">
        取消
      </view> -->
    </u-popup>
  </view>
</template>

<script>
  export default {
    name: "su-list-picker",
    model: {
      prop: 'value',
      event: 'change'
    },
    props: {
      value: {
        type: [String,Number],
        default: ''
      },
      options: {
        type: Array,
        default () {
          return []
        }
      },
      listLoader: {
        type: Function,
        default () {
          return () => {}
        }
      },
      defaultProps: {
        type: Object,
        default () {
          return {
            value: 'id',
            label: 'name'
          }
        }
      },
    },
    data() {
      return {
        activeRow: {
          [this.defaultProps.value]:'',
          [this.defaultProps.name]:'',
        },
        queryParams: {
          keyword: '',
          pageSize: 20,
          pageNum: 1
        },
        list: [],
        listLoading: false,
        listLoaded: false,
        listTotal: 0,
        showPopup: false
      };
    },
    watch: {
      showPopup(val) {
        this.$store.commit('setPopupOpen', val)
      }
    },
    mounted() {
      this.reloadList()
    },
    methods: {
      itemClick(item) {
        this.activeRow = item
        this.$emit('change', item[this.defaultProps.value])
        this.$emit('input', item[this.defaultProps.value])
        this.showPopup = false
      },
      reloadList() {
        this.list = []
        this.listLoaded = false
        this.listLoading = false
        this.queryParams.pageNum = 1
        this.getListPage()
      },
      getListPage() {
        if (this.listLoaded || this.listLoading) return
        this.listLoading = true
        if (this.listLoader) {
          this.listLoader(this.queryParams).then(res => {
            console.log(res)
            this.listLoading = false
            const pageData = res.list || []
            this.list = this.list.concat(pageData)
            this.listTotal = res.total || 0
            if (this.list.length >= this.listTotal || pageData.length < this.queryParams.pageSize) {
              this.listLoaded = true
            }
          })
        }
        this.$emit('scrolltolower')
      }
    }
  }
</script>

<style lang="scss">
  .su-list-picker {
    width: 100%;

    &__handler {
      width: 100%;
    }
  }

  .test {
    position: relative;
    z-index: 13;
  }

  .popup-cover-view {
    position: fixed;
    z-index: 20000000;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
  }

  .su-list-popup {
    &_container {
      width: 100vw;
      height: calc(100vh - 200px);
      /* #ifdef H5 */
      height: calc(100vh - 200px);
      /* #endif */
    }

    &_footer {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      right: 0;
      font-size: 28upx;
      background-color: #fff;
    }

    &_list {
      display: flex;
      flex-direction: column;

      &_item {
        padding: 16upx 30upx;
        display: flex;
        align-items: center;
        font-size: 30upx;
        border-bottom: solid 1upx #f5f5f5;
        .iconfont{
          font-size: 48upx;
          color: #ccc;
        }

        &:active {
          background-color: #f7f7f7;
        }

        &.active {
          background-color: #f7f7f7;
          .iconfont{
            color: $u-primary;
          }
        }
      }

      &_main {
        flex: 1;
      }
    }
  }
</style>
